<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta charset="utf-8">
	<title>vue实例</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
	<!--
		Object.freeze()阻止修改现有的属性，也意味着响应系统无法再追踪变化。
	 -->
	<div id="app">
	  	<p>{{ obj.foo }}</p>
	  	<!-- 这里的 `obj.foo` 不会更新！ -->
	  	<button @click="obj.foo = 'baz'">Change it</button>
	</div>

	<script type="text/javascript">
		var obj = {
		  foo: 'bar'
		}

		Object.freeze(obj)

		new Vue({
		  el: '#app',
		  data () {
		    return {
		      obj
		    }
		  }
		})
	</script>


	<!-- 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如： -->

	<div id="example">
		<input type="" name="" v-model = "a">
	</div>
	<script type="text/javascript">
		var data1 = { a: 1 }
		var vm = new Vue({
		  el: '#example',
		  data: data1
		})

		vm.$data === data1; // => true
		vm.$el === document.getElementById('example'); // => true
		// $watch 是一个实例方法
		vm.$watch('a', function (newValue, oldValue) {
		  // 这个回调将在 `vm.a` 改变后调用
		  console.log(222)
		});
		console.log(vm.$data)
	</script>



	<!--
		生命周期钩子的 this 上下文指向调用它的 Vue 实例。
	-->
	<script type="text/javascript">
		new Vue({
		  	data() {
		   		return {
			     	page: 123,
			     	a : 1,
			    }
			},
			methods: {
			    showPage() {
			     	console.log(this.page);
			   	}
			},
		  	created: function () {
		    	// `this` 指向 vm 实例
		    	console.log('a is: ' + this.a)
				console.log(this);
				console.log(this.showPage)
		  	},
		})
	</script>




	<script type="text/javascript">

	</script>
</body>
</html>